<style>
    .scale-control-container{
        position: relative;
        margin: 0 auto;
        max-width: 1200px;
        height: 500px;
    }
    .box{
        width: 300px;
        height: 300px;
        background: #2aa126;
        margin: 0 auto;
    }
    .img{
        position: absolute;
        width: 240px;
        height: 180px;
        background: #ea8f23;
        left: 38%;
    }
</style>
<template>
    <div class="scale-control-container">
        <div class="box">代表相对定位的元素</div>
        <div class="img">代表绝对定位的图片</div>
    </div>
</template>

<script>
    var ctrls = new ScaleControl();
    var box = document.querySelector('.box');
    var img = document.querySelector('.img');

    document.onclick = function(e){
        if(e.target === box || e.target === img){
            ctrls.bind(e.target);
        }else{
            if(!ctrls.contains(e.target)) {
                ctrls.unbind();
            }
        }
    }
</script>
